<template>
  <div class="enterprise clearFix">
    <div class="ent-search">
      <el-input placeholder="请输入企业名称" class="input-with-select" v-model="searchValue" @keyup.enter.native="getEntlist" clearable>
        <el-button class="ent-find" slot="append" icon="el-icon-search" @click="getEntlist">搜索</el-button>
      </el-input>
    </div>
    <div class="ent-condition c-shadow">
      <div class="ent-state">
        <div class="ent-selected clearFix">
          <div class='clearFix labelBox ent-tj fl'>
            <span class='dataType fl'>已选条件</span>
            <label class="fl" v-for="(name, ind) in alreadySelect" :key="ind">
              {{name.name}}<i class="ent-clear" @click="removeSelf(name, ind)"></i>
            </label>
          </div>
          <div class="ent-qk fr">
            <a class="fr" @click="empty">清空</a>
          </div>
        </div>
        <div class="ent-state-sup clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>监管状态</span>
            <label class="fl" v-for="(name, ind) in regulatoryStatus" :key="ind" @click="addSelected2(name.name,'controlStatus')" :class="{sel:name.flag}">{{name.name}}</label>
          </div>
        </div>
        <div class="ent-warning clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>当前预警状况</span>
            <label class="fl" v-for="(name, ind) in waringStatus" :key="ind" @click="addSelected2(name.name,'isRisk')" :class="{sel:name.flag}">{{name.name}}</label>
          </div>
        </div>
        <div class="ent-emphasis clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>重点关注企业</span>
            <label class="fl" v-for="(name, ind) in emphasisData" :key="ind" @click="addSelected2(name.name,'focusStatus')" :class="{sel:name.flag}">{{name.name}}</label>
          </div>
          <div class="top-opt fl">
            <span class="mgl-50 date-picker">烽火值范围:
              <input type="text" class="fhz" @input="fhzChange" v-model="min" :max="max"/>
              <span class="space-mark">-</span>
              <input type="text" class="fhz" @input="fhzChange" v-model="max" :min="min"/>
            </span>
          </div>
        </div>
        <div class="ent-person clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>自然人股东</span>
            <label class="fl" v-for="(name, ind) in personData" :key="ind" @click="addSelected2(name.name,'shareholderType')" :class="{sel:name.flag}">{{name.name}}</label>
          </div>
          <el-button class="fr" type="primary" @click="exportReport">企业列表导出</el-button>
        </div>
      </div>
    </div>
    <div class="ent-supervise c-shadow">
      <div class="ent-main">
        <div class="ent-lead">
          <form enctype="multipart/form-data" method="post" id="formUpload" class="formUpload" @click="statechange" v-if="(uploadFlag && stateFlag) || (uploadFlag && !stateFlag)">
            <span class="import-btn fl formUpload"><i class="iconfont icon-baobiao statement"></i>监管企业导入</span>
            <input class="file-input" type="file" name="file" @change="fileUpload"
                  accept=".XLS,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          </form>
          <div v-else class="cursorno">
            <span class="import-btn fl formUpload"><i class="iconfont icon-baobiao statement"></i>正在导入中...</span>
          </div>
          <div class="fl">
            <a class="fl" :href="exportSrc">导出模板.xls</a>
            <span class="fl">注：请按照模版样式上传企业列表</span>
          </div>
          <span class="fr red">
            注：重点监控和一般监控企业数量越多，企业信息更新频次将会变慢。请合理调整您需要监管的企业
          </span>
        </div>
        <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0">
          <thead>
            <th>企业名称</th>
            <th class="widei">企业标签</th>
            <th class="widei">法人代表</th>
            <th class="widei">监管状态</th>
            <th width="100px">烽火指数</th>
            <th class="widei">当前预警情况</th>
            <th class="widei">导入时间</th>
            <th class="widei">操作</th>
          </thead>
          <tr v-for="(lists, ind) in entList" :key="ind">
            <!-- ,focusStatus:lists.focusStatus -->
            <router-link tag="td" class="ent-name" :title="lists.entName" :to="{name:'baseinfo', query: {entid:lists.id,entname:lists.entName}}">{{lists.entName}}</router-link>
            <td class="text-center">{{lists.entLabel || '--'}}</td>
            <td class="text-center">{{lists.legalPerson || '--'}}</td>
            <td class="text-center" :class="{green:lists.controlStatus === 2,red:lists.controlStatus === 1,yellow:lists.controlStatus === 3,blue:lists.controlStatus === 4}">{{regulatory[lists.controlStatus] || '--'}}</td>
            <td class="text-center" :class="{color60:lists.numberClass === 6,color80:lists.numberClass === 8,color100:lists.numberClass === 10}">{{lists.totalRiskScore || 0}}</td>
            <td class="text-center" :class="{black:lists.isRisk === 0,yellow:lists.isRisk === 1}">{{warningS[lists.isRisk] || '--'}}</td>
            <td class="text-center">{{lists.importDate | dateFormat}}</td>
            <td class="text-center supervise" @click="cancel(lists)">{{lists.isControl?'取消监管':'监管'}}</td>
          </tr>
        </table>
        <j-no-data :mode="'b'" msg="b" v-if="entList.length === 0"></j-no-data>
      </div>
    </div>
    <div class="ent-yujing fl">监管<span class="ent-number">{{total}}</span>家企业</div>
    <div class="block paging-wrap fr">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page.sync="listParams.pageNum"
        :page-size.sync="listParams.pageSize"
        :total.sync="total"
        layout="prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 弹出层内容 -->
    <j-dialog class="enterprise_dialog" ref="specialDialog" :initTitle.sync="supervisorInfo.initTitle">
      <i class="iconfont icon-question"></i>
      <p>您确定{{supervisorInfo.word}}<span>{{supervisorInfo.name}}</span>吗？</p>
      <div class="btn">
        <button class="save-btn" @click="deleteById">确 定</button>
        <button class="cancle-btn" @click="close">取 消</button>
      </div>
    </j-dialog>
    <!-- 报表弹出层内容 -->
    <j-dialog class="feature_dialog" ref="exportDialog" :initTitle="initTitle1">
      <label class="exportbb fl">报表名称</label>
      <el-input class="tezc fr" v-model="exportName" name="name" placeholder="" maxlength=""></el-input>
      <div class="baobiao" v-show="errMsg">{{errMsg}}</div>
      <div class="btn">
        <!--  :href="importSrc" -->
        <a class="save-btn" target="_blank" @click="deleteById1()">确 定</a>
        <button class="cancle-btn" @click="close1()">取 消</button>
      </div>
    </j-dialog>
    <!-- 导入结果 -->
    <j-dialog class="feature_dialog" ref="casedialog" :initTitle="caseshow">
      <p width="80%" class="case">
        本次申请导入
        {{sum || 0}}
        家企业，有效导入
        {{news || 0}}
        家，其中
        {{sum - news || 0}}
        家与本地库重复
      </p>
    </j-dialog>
    <j-dialog class="feature_dialog" ref="casedialog2" :initTitle="caseshow2">
      <p width="90%" class="case">
        <el-progress :percentage="casenum"></el-progress>
        <span class="loadin">数据读取中...</span>
      </p>
    </j-dialog>
  </div>
</template>
<script>
import { jSelect, jDialog, jNoData } from '../../components'
import { enterprise as api } from '../../api'
import axios from 'axios'
export default {
  data() {
    return {
      caseshow: '导入结果',
      casenum:0,
      caseshow2: '数据读取',
      exportSrc: window.api_fhzCount + '/importEntInfo/modelExport',
      importSrc: window.api_host + '/exportExcel/exportMonitorEntExcel',
      exportSrc1: window.api_fhzCount + "/importEntInfo/importExcel",
      exportName: '',
      exportParam: {},
      news:0,
      sum:0,
      jobname: '',
      initTitle1: '生成报表',
      file: '',
      fileData: {
        file: null
      },
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      uploadParam: {
        showList: false
      },
      supervisorInfo: {
        initTitle: '取消监管提示',
        name: '',
        id: '',
        control: 1,
        word: '取消监管'
      },
      total: 0,
      entId: '',
      entName: '',
      entList: [],
      searchValue: '',
      stateFlag: true,
      regulatory: [
        '一般监控', '重点监控', '安全', '排查处理', '白名单'
      ],
      regulatoryStatus: [{
        name:'一般监控',
        flag: false
      }, {
        name:'重点监控',
        flag: false
      }, {
        name:'安全',
        flag: false
      }, {
        name:'排查处理',
        flag: false
      }, {
        name:'白名单',
        flag: false
      }],
      regulatoryLabel: '',
      regulatoryIndex: -1,
      controlStatus: '',
      warningS: [
        '未预警', '预警中'
      ],
      waringStatus: [{
        name:'未预警',
        flag: false
      }, {
        name:'预警中',
        flag: false
      }],
      isRisk: '',
      waringLabel: '',
      warningIndex: -1,
      emphasisData: [{
        name:'全部',
        flag: true
      }, {
        name:'是',
        flag: false
      }, {
        name:'否',
        flag: false
      }],
      focusStatus:'',
      emphasisLabel: '',
      emphasisIndex: 0,
      personData: [{
        name:'全部',
        flag: true
      }, {
        name:'是',
        flag: false
      }, {
        name:'否',
        flag: false
      }],
      uploadFlag:true,
      shareholderType:'',
      personLabel: '',
      personIndex: 0,
      alreadySelect: [],
      min:'',
      max:'',
      listParams: {
        pageSize: 10,
        pageNum: 1
      },
      importingList: [],
      errMsg: ''
    }
  },
  methods: {
    statechange() {
      this.stateFlag = false
    },
    // 文件上传代码
    fileUpload(evt) {
      this.$refs.casedialog2.show = true
      let _that = this
      let timeid = setInterval(function() {
        if (_that.casenum >= 90) {
          _that.casenum = 10
        }
        _that.casenum += 10
      }, 6000)
      this.uploadFlag = false
      this.stateFlag = true
      if (this.importingList.length > 4) {
        // this.fancybox.hint = '导入任务最多同时进行5个'
        // this.fancybox.show = true
        this.clearInput()
        return
      }
      let target = evt.target || evt.srcElement
      let file = target.files[0]
      if (!file) {
        return
      }
      let reg = /[.](xlsx|xls|xlsm|xltm)$/
      if (!reg.test(file.name)) {
        // this.fancybox.hint = '上传的文件只限于excel'
        // this.fancybox.show = true
        this.clearInput()
        return
      }
      // let token = sessionStorage.getItem('token')
      let token = JSON.parse(sessionStorage.getItem('user')).token
      let curConfig = {
        timeout: 600000,
        headers: {
          Authorization: token
        }
      }
      let formData = new FormData()
      formData.append('file', file)
      formData.append('jobname', file.name.split('.')[0])
      this.jobname = file.name.split('.')[0]
      // let params = {
      //   file:file,
      //   jobname:this.jobname
      // }
      // api.importExcel2(params).then(ret => {
      //   if (ret.code === -1) return false
      //   if (ret.data.data.id) {
      //     clearTimeout(timeid)
      //     this.casenum = 100
      //     this.news =ret.data.data.entNewCount
      //     this.sum = ret.data.data.entSumCount
      //     this.$refs.casedialog2.show = false
      //     this.$refs.casedialog.show = true
      //     this.casenum = 0
      //     api.getupLoad({
      //       id: ret.data.data.id
      //     }).then(res => {
      //       console.log(res)
      //       this.uploadFlag = true
      //       this.stateFlag = true
      //     }).catch(err => {
      //       console.log(err)
      //       this.uploadFlag = true
      //       this.stateFlag = true
      //     })
      //   }
      //   setTimeout(() => {
      //     this.$refs.casedialog.show = false
      //   }, 3000)
      // }).catch(err => {
      //   if (err) {
      //     this.$refs.casedialog2.show = false
      //     this.casenum = 100
      //     this.tips('错误:' + '数据导入失败', 'error')
      //     this.casenum = 0
      //     this.uploadFlag = true
      //     this.stateFlag = true
      //   }
      // })
      axios.post(
        window.api_fhzCount + '/importEntInfo/importExcel',
        formData,
        curConfig
      ).then(ret => {
        if (ret.code === -1) return false
        if (ret.data.data.id) {
          clearTimeout(timeid)
          this.casenum = 100
          this.news =ret.data.data.entNewCount
          this.sum = ret.data.data.entSumCount
          this.$refs.casedialog2.show = false
          this.$refs.casedialog.show = true
          this.casenum = 0
          api.getupLoad({
            id: ret.data.data.id
          }).then(res => {
            console.log(res)
            this.uploadFlag = true
            this.stateFlag = true
          }).catch(err => {
            console.log(err)
            this.uploadFlag = true
            this.stateFlag = true
          })
        }
        setTimeout(() => {
          this.$refs.casedialog.show = false
        }, 3000)
      }).catch(err => {
        if (err) {
          this.$refs.casedialog2.show = false
          this.casenum = 100
          this.tips('错误:' + '数据导入失败', 'error')
          this.casenum = 0
          this.uploadFlag = true
          this.stateFlag = true
        }
      })
    },
    clearInput() {
      let form = document.getElementById('formUpload')
      form.reset()
    },
    fhzChange() {
      // this.getEntlist()
      this.paging(1)
    },
    // 获取企业列表,搜索方法
    getEntlist(param) {
      let params = {
        pageSize: 10,
        pageNum: 1
      }
      if (this.searchValue) {
        params.searchName = this.searchValue
      }
      if (this.regulatoryLabel) {
        this.regulatoryStatus.forEach((sname, ind) => {
          if (sname.name === this.regulatoryLabel) {
            params.controlStatus = ind
          }
        })
      }
      if (this.waringLabel) {
        this.waringStatus.forEach((sname, ind) => {
          if (sname.name === this.waringLabel) {
            params.isRisk = ind
          }
        })
      }
      if (this.emphasisLabel) {
        if (this.emphasisLabel === '全部') {
          delete params.focusStatus
        } else if (this.emphasisLabel === '否') {
          params.focusStatus = 0
        } else {
          params.focusStatus = 1
        }
      }
      if (this.personLabel) {
        if (this.personLabel === '全部') {
          delete params.shareholderType
        } else if (this.personLabel === '否') {
          params.shareholderType = 0
        } else {
          params.shareholderType = 1
        }
      }
      if (this.max || this.max === 0) {
        params.maxscore = this.max
      } else {
        delete params.maxscore
      }
      if (this.min || this.min === 0) {
        params.smallScore = this.min
      } else {
        delete params.smallScore
      }
      // smallScore  最小
      // maxscore  最大
      if (param) {
        params = Object.assign(params, param)
      }
      // console.log(params)
      api.getEnterprise(params).then(ret => {
        this.entList = ret.data.list
        this.total = ret.data.total
        this.entList.forEach((item, ind) => {
          item.totalRiskScore = Number(item.totalRiskScore) || '0'
          item.numberClass = this.hotNumberToClass(item.totalRiskScore)
        })
      }).catch(err => {
        console.log(err.msg)
      })
    },
    hotNumberToClass(num) {
      if (+num >= 80) {
        return 10
      } else if (+num >= 60) {
        return 8
      } else if (+num >= 40) {
        return 6
      } else {
        return 4
      }
    },
    // 点击监管状态和当前预警状况标签的时候添加到已选标签方法
    addSelected2(name, type) {
      if (type === 'controlStatus') {
        this.regulatoryStatus.forEach(sname => {
          sname.flag = false
          if (sname.name === name) {
            sname.flag = true
            this.regulatoryLabel = sname.name
          }
        })
      }
      if (type === 'isRisk') {
        this.waringStatus.forEach(sname => {
          sname.flag = false
          if (sname.name === name) {
            sname.flag = true
            this.waringLabel = sname.name
          }
        })
      }
      if (type === 'focusStatus') {
        this.emphasisData.forEach(sname => {
          sname.flag = false
          if (sname.name === name) {
            sname.flag = true
            this.emphasisLabel = sname.name
          }
        })
      }
      if (type === 'shareholderType') {
        this.personData.forEach(sname => {
          sname.flag = false
          if (sname.name === name) {
            sname.flag = true
            this.personLabel = sname.name
          }
        })
      }
      this.pushLabel()
    },
    pushLabel() {
      this.alreadySelect = []
      if (this.regulatoryLabel) {
        this.alreadySelect.push({
          type:'controlStatus',
          name:this.regulatoryLabel
        })
      }
      if (this.waringLabel) {
        this.alreadySelect.push({
          type:'isRisk',
          name:this.waringLabel
        })
      }
      if (this.emphasisLabel === '是') {
        this.alreadySelect.push({
          type:'focusStatus',
          name:'重点关注企业'
        })
      } else if (this.emphasisLabel === '否') {
        this.alreadySelect.push({
          type:'focusStatus',
          name:'非重点关注企业'
        })
      }
      if (this.personLabel === '是') {
        this.alreadySelect.push({
          type:'shareholderType',
          name:'自然人股东'
        })
      } else if (this.personLabel === '否') {
        this.alreadySelect.push(({
          type:'shareholderType',
          name:'非自然人股东'
        }))
      }
      this.paging(1)
    },
    // 已选标签干掉自己
    removeSelf(list, num) {
      this.alreadySelect.splice(num, 1)
      if (list.type === 'controlStatus') {
        this.regulatoryLabel = ''
        this.regulatoryStatus.forEach(sname => {
          sname.flag = false
        })
      } else if (list.type === 'isRisk') {
        this.waringLabel = ''
        this.waringStatus.forEach(sname => {
          sname.flag = false
        })
      } else if (list.type === 'focusStatus') {
        this.emphasisLabel = '全部'
        this.emphasisData.forEach(sname => {
          sname.flag = false
          if (sname.name === '全部') {
            sname.flag = true
          }
        })
      } else if (list.type === 'shareholderType') {
        this.personLabel = '全部'
        this.personData.forEach(sname => {
          sname.flag = false
          if (sname.name === '全部') {
            sname.flag = true
          }
        })
      }
      this.paging(1)
    },
    // 清空
    empty() {
      this.alreadySelect.splice(0, this.alreadySelect.length)
      this.waringLabel = this.regulatoryLabel = ''
      this.personLabel = this.emphasisLabel = '全部'
      this.max = ''
      this.min = ''
      this.regulatoryStatus.forEach(sname => {
        sname.flag = false
      })
      this.waringStatus.forEach(sname => {
        sname.flag = false
      })
      this.emphasisData.forEach(sname => {
        sname.flag = false
        if (sname.name === '全部') {
          sname.flag = true
        }
      })
      this.personData.forEach(sname => {
        sname.flag = false
        if (sname.name === '全部') {
          sname.flag = true
        }
      })
      this.paging(1)
    },
    // 当pagesize改变的时候出发该函数
    handleSizeChange() {},
    // 当切换页码的时候出发的函数
    paging(index) {
      this.listParams.pageNum = index
      let param = { pageNum: index }
      this.getEntlist(param)
    },
    // 是否取消监管弹窗打开
    cancel(item) {
      if (item.isControl) {
        this.supervisorInfo.initTitle = '取消监管提示'
        this.supervisorInfo.word = '取消监管'
      } else {
        this.supervisorInfo.initTitle = '监管提示'
        this.supervisorInfo.word = '监管'
      }
      this.$refs.specialDialog.show = true
      this.supervisorInfo.name = item.entName
      this.supervisorInfo.id = item.id
      this.supervisorInfo.isControl = item.isControl
    },
    // 执行该企业是否取消监管
    deleteById() {
      this.$refs.specialDialog.show = false
      let params = {
        id: this.supervisorInfo.id,
        control: this.supervisorInfo.isControl ? 0 : 1
      }
      params.control = this.supervisorInfo.isControl ? 0 : 1
      let _this = this
      api.cancelSupervisor(params).then(rtn => {
        // 等待服务端更改完毕重新拉去列表
        setTimeout(function() {
          _this.getEntlist()
        }, 1000)
      })
    },
    close() {
      this.$refs.specialDialog.show = false
    },
    // 报表导出
    exportReport() {
      this.exportName = ''
      this.$refs.exportDialog.show = true
    },
    deleteById1() {
      this.$refs.exportDialog.show = false
      this.entName = this.searchValue
      this.reportName = this.exportName
      let url = window.api_host + '/exportExcel/exportMonitorEntExcel?token=' + this.token + '&searchName=' + this.searchValue + '&reportName=' + this.exportName
      this.regulatoryStatus.forEach((sname, ind) => {
        if (sname.name === this.regulatoryLabel) {
          this.controlStatus = ind
        }
      })
      this.waringStatus.forEach((sname, ind) => {
        if (sname.name === this.waringLabel) {
          this.isRisk = ind
        }
      })
      if (this.emphasisLabel === '是') {
        this.focusStatus = 1
      } else if (this.emphasisLabel === '否') {
        this.focusStatus = 0
      }
      if (this.personLabel === '是') {
        this.shareholderType = 1
      } else if (this.personLabel === '否') {
        this.shareholderType = 0
      }
      if (this.regulatoryLabel || this.waringLabel || this.emphasisLabel || this.personLabel || this.min || this.max) {
        this.regulatoryLabel !== '' ? url += '&controlStatus=' + this.controlStatus : url += ''
        this.waringLabel !== '' ? url += '&isRisk=' + this.isRisk : url += ''
        this.emphasisLabel !== '全部' && this.emphasisLabel !== '' ? url += '&focusStatus=' + this.focusStatus : url += ''
        this.personLabel !== '全部' && this.personLabel !== '' ? url += '&shareholderType=' + this.shareholderType : url += ''
        this.min !== '' ? url += '&smallScore=' + this.min : url += ''
        this.max !== '' ? url += '&maxscore=' + this.max : url += ''
      }
      window.open(url)
    },
    close1() {
      this.$refs.exportDialog.show = false
    }
  },
  computed: {
    upLoadHeaders() {
      return {
        'Authorization':JSON.parse(localStorage.getItem("user")).token || ''
      }
    }
  },
  mounted() {
    this.getEntlist()
    this.token = this.$store.state.user.userInfo.token
  },
  components: {
    jSelect,
    jDialog,
    jNoData
  }
}
</script>
<style lang="scss" scoped>
.color60 {
  color: #5ad28a;
}
.color80 {
  color: #f29611;
}
.color100 {
  color: #ff3000;
}
.red {
  color: #e93714 !important;
}
.blue {
  color: #49B0FD !important;
}
.enterprise {
  width: 100%;
  .top-opt {
    position: absolute;
    top: 5px;
    right: 300px;
  }
  .fhz {
    height: 30px;
    line-height: 30px;
    width: 50px;
    border: #ccc 1px solid;
    margin: 0 10px;
    border-radius: 5px;
  }
  .ent-search {
    text-align: center;
    margin-top: 20px;
    .input-with-select {
      width: 438px;
      height: 36px;
      margin: 0 auto;
      border-radius: 3px 0px 0px 3px;
      .ent-find {
        height: 38px;
        background: #3385f1;
        color: #fff;
        border-radius: 0px 3px 3px 0px;
      }
    }
  }
  .ent-condition {
    width: 100%;
    margin: 20px 0px;
    height: auto;
    min-height: 174px;
    background: #fff;
    border-radius: 5px;
    .ent-state {
      padding: 13px 40px;
      .dataType {
        font-size: 14px;
        color: #999;
        // height: 48px;
        padding-top: 5px;
        margin-right: 57px;
      }
      .ent-tj {
        width: 97%;
        justify-content: space-between;
      }
      .ent-qk {
        width: 3%;
      }
      .labelBox {
        .ent-qk {
          width: 5%;
        }
        label {
          margin: 5px 80px 10px 0;
          cursor: pointer;
          font-size: 14px;
        }
      }
      .ent-selected {
        border-bottom: 1px solid #d6d6d6;
        a {
          color: #14aaff;
          margin-top: 16px;
          font-size: 14px;
          text-decoration: underline;
        }
        .labelBox {
          // width: 100%;
          padding-top: 10px;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          label {
            color: #1688f3;
            background: #f0f7ff;
            padding: 7px 24px;
            border: 1px solid #9dc5fd;
            border-radius: 4px;
            margin: 0 46px 20px 0;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            position: relative;
            .ent-clear {
              width: 20px;
              height: 20px;
              position: absolute;
              right: -10px;
              top: -8px;
              background: url(../../assets/images/clear.png) no-repeat;
            }
          }
          .dataType {
            height: 52px;
            margin-right: 60px;
          }
        }
      }
      .ent-state-sup,
      .ent-warning,
      .ent-emphasis,
      .ent-person {
        margin-top: 15px;
        label:hover {
          color: #0085f6;
        }
        label.sel {
          color: #0085f6;
        }
      }
      .ent-emphasis {
        position: relative;
      }
      .ent-state-sup {
        .dataType {
          margin-right: 85px;
        }
      }
    }
  }
  .ent-supervise {
    width: 100%;
    // margin: 0px 0px 20px;
    height: 554px;
    background: #fff;
    border-radius: 5px;
    .ent-main {
      padding: 30px 40px;
      .formUpload {
        cursor: pointer;
      }
      .cursorno {
        cursor: no-drop;
      }
      .ent-lead {
        height: 35px;
        position: relative;
        .ent-derive {
          width: 166px;
          height: 36px;
          line-height: 10px;
        }
        a,
        span {
          margin: 10px 0 0 50px;
          color: #1688f3;
          font-size: 14px;
        }
        span {
          color: #999;
        }
        span.import-btn {
          display: inline-block;
          background: #3385f1;
          color: #ffffff;
          border-radius: 5px;
          font-size: 14px;
          padding: 4px 24px;
          margin: 5px 0 0 0;
        }
        .file-input {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          font-size: 50px;
          width: 150px;
          height: 34px;
          cursor: pointer;
        }
      }
      .table-fixed {
        width: 100%;
        margin-top: 20px;
        border-radius: 5px;
        font-size: 14px !important;
        line-height: 40px;
        th {
          font-weight: bold;
        }
        .green {
          color: #12cd65;
        }
        .red {
          color: #e93714;
        }
        .yellow {
          color: #ff9921;
        }
        .black {
          color: #666;
        }
        tr td:last-child,
        tr td:first-child {
          color: #1688f3;
          cursor: pointer;
        }
        .widei {
          width: 160px;
        }
      }
    }
    .importBox {
      overflow: hidden;
      width: 200px;
      height: 35px;
      display: inline-block;
      float: left;
    }
  }
  .ent-yujing {
    font-size: 14px;
    color: #999;
    margin-top: 20px;
    .ent-number {
      color: #40a1f3;
      font-weight: bold;
    }
  }
  .enterprise_dialog {
    width: 545px;
    i {
      font-size: 30px;
      text-align: center;
      color: #3586f2;
      width: 100%;
      display: block;
      margin: 15px 0 20px;
    }
    .tezc {
      width: 398px;
      margin-bottom: 15px;
    }
    .el-input {
      display: block;
      margin: 40px auto 20px;
    }
    p {
      display: block;
      margin-bottom: 58px;
      color: #666;
      text-align: center;
      span {
        color: #f28e22;
      }
    }
  }
  .btn {
    text-align: center;
    margin-bottom: 20px;
    button:nth-child(2) {
      margin-left: 20px;
    }
    button:hover {
      border: 1px solid #ccc;
    }
  }
  .supervise {
    cursor: pointer;
  }
}
// 弹出层
.feature_dialog {
  width: 545px;
  .case {
    margin: 50px 0 20px 10px;
    font-size: 16px;
    text-align: center;
  }
  .loadin {
    display: block;
  }
  .exportbb {
    margin: 50px 0 20px 10px;
  }
  .tezc {
    width: 398px;
    margin-bottom: 15px;
  }
  .el-input {
    display: block;
    margin: 40px 15px 30px;
  }
  .baobiao {
    clear: both;
    display: block;
    margin-bottom: 28px;
    color: #ff4242;
    text-align: center;
  }
  .btn {
    text-align: center;
    a {
      color: #fff;
      width: 111px;
      height: 34px;
      line-height: 34px;
      display: inline-block;
      background: #3f8ffa;
      border: 1px solid #9dc5fd;
      border-radius: 5px;
      font-size: 14px;
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/enterprise/enterPrise.vue